<template>
	<div class="assnavList">
		<div class="navtop">
			<h4>辅导解析</h4>
			<van-dropdown-menu>
				<van-dropdown-item v-model="value1" :options="option1" />
				<van-dropdown-item v-model="value2" :options="option2" />
				<van-dropdown-item v-model="value3" :options="option3" />
			</van-dropdown-menu>
		</div>
		<ul>
			<li v-for="(v) in this.$store.state.assnavList" :key="v.id" @click="fun(v.id)">
				<img :src="v.img" />
				<h5>{{v.title}}</h5>
				<p>
					<span>{{v.type1}}</span>
					<span>{{v.type2}}</span>
					<span>{{v.type3}}</span>
				</p>
				<h6>上传者：{{v.author}}</h6>
				<router-link to="/assist">+</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		mounted(){
			this.$store.dispatch("assnavListaxios");
		},
		data() {
			return {
				value1: 0,
				value2: 'a',
				value3:'a',
				option1: [{
						text: '大学',
						value: 0
					},
					{
						text: '中学',
						value: 1
					},
					{
						text: '小学',
						value: 2
					},
				],
				option2: [{
						text: '大学数学',
						value: 'a'
					},
					{
						text: '大学物理',
						value: 'b'
					},
					{
						text: '管理学',
						value: 'c'
					},
					{
						text: '经济学',
						value: 'd'
					},
					{
						text: '思想政治',
						value: 'e'
					},
					{
						text: '统计学',
						value: 'f'
					},
					{
						text: '其他',
						value: 'g'
					},
				],
				option3: [{
						text: '上册',
						value: 'a'
					},
					{
						text: '下册',
						value: 'b'
					},
					{
						text: '全一册',
						value: 'c'
					}
				]
			}
		},
		methods:{
			fun(id){
				this.$router.push({name:'AssDetails',params:{id:id}})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.assnavList {
		background-color: #FFFFFF;
		padding-bottom: 0.55rem;
		.navtop{
			position: sticky;
			top: 0.2rem;
			z-index:2;
			h4 {
				font-size: 0.18rem;
				padding: 0.2rem 0.15rem 0;
			}
			.van-dropdown-menu__title--active,.van-dropdown-item__option--active,.van-dropdown-item__option--active .van-dropdown-item__icon{
				color:#1cb884;
			}
		}
		ul{
			padding: 0 0.15rem;
			li{
				height: 1.67rem;
				border-bottom: 1px solid #c4c3c4;
				position: relative;
				img{
					margin-top: 0.22rem;
				}
				h5{
					font-size: 0.17rem;
					position: absolute;
					top: 0.22rem;
					left: 1.05rem;
				}
				p{
					position: absolute;
					top: -0.22rem;
					left: 1.05rem;
				}
				span{
					font-size: 0.12rem;
					color:#454545;
					padding: 0.02rem 0.08rem;
					border: 1px solid #c4c3c4;
					border-radius: 0.15rem;
					margin-right: 0.05rem;
				}
				h6{
					font-size: 0.12rem;
					color: #5a5a5a;
					position: absolute;
					bottom: 0.22rem;
					left: 1.05rem;
				}
				a{
					width: 0.48rem;
					height: 0.25rem;
					background-color: #10b880;
					border-radius: 0.15rem;
					font-size: 0.14rem;
					color:#fff;
					display: block;
					line-height: 0.25rem;
					text-align: center;
					position: absolute;
					bottom: 0.22rem;
					right: 0.15rem;
				}
			}
		}
	}
</style>
